<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{msg}}</p>
    </div>
    <script>
        const vm = {}
        let val = 'hello'
        Object.defineProperty(vm, 'msg', {
            get () {
                return val
            },
            set (newVal) {
                document.querySelector('#app p').innerHTML = newVal
                val = newVal
                
            }
        })
        document.querySelector('#app p').innerHTML = vm.msg
    </script>
</body>
<el-table style="width: 100%; margin-top: 20px" :data="tagsData">
    <el-table-column label="序号" width="80px" prop="id" align="center">
    </el-table-column>
    <el-table-column label="所属学科" prop="subjectName" align="center">
    </el-table-column>
    <el-table-column label="标签名称" prop="tagName" align="center">
    </el-table-column>
    <el-table-column label="创建者" prop="username" align="center">
    </el-table-column>
    <el-table-column label="创建日期" prop="addDate" align="center">
    </el-table-column>
    <el-table-column label="面试题数量" prop="totals" align="center">
    </el-table-column>
    <el-table-column label="状态" prop="state" align="center">
      <template #default="scope">
        {{scope.row.state === 1 ? '已禁用' :'已启用'}}
      </template>
    </el-table-column>
    <el-table-column label="操作" width="150px" align="center">
      <template #default="scope">
        <el-button type="text" @click="handelUse(scope.row)">{{scope.row.state === 1 ?'启用':'禁用'}} </el-button>
        <el-button type="text" @click="handelModify(scope.row)" :disabled="scope.row.state === 0">修改</el-button>
        <el-button type="text" @click="handelDel(scope.row)" :disabled="scope.row.state === 0">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</html>